<!--通用下拉组件  *输入项的查询参数默认为condition-->
<!--@param valueField 指定列表的key   实际值-->
<!--@param labelField 指定列表的value 展示值-->
<!--@param defaultSelectValue 指定默认值的value 外部调用必须指定defaultSelect emit方法-->
<!--@param defaultSelectIndex 指定默认值的index 外部调用必须指定defaultSelect emit方法-->
<!--@param url  查询列表的url-->
<template>
  <el-select v-model="selectValue"
             filterable clearable remote
             :style="{width: '100%'}"
             :remote-method="queryBaseCombox"
             @focus="queryBaseComboxNoQuery"
  >
    <el-option
        v-for="item in dataList"
        :key="String(item[(this.valueField===undefined||this.valueField==='null'||this.valueField==='')?'code':this.valueField])"
        :label="String(item[(this.labelField===undefined||this.labelField==='null'||this.labelField==='')?'name':this.labelField])"
        :value="String(item[(this.valueField===undefined||this.valueField==='null'||this.valueField==='')?'code':this.valueField])"
    />
  </el-select>

</template>
<script>
import request from '@/utils/request'

export default {
  model: {
    prop: 'selectValue',
    event: 'underlyerIdsChange',
    valueField: 'code',
    labelField: 'name',
    url: '',
    defaultSelectIndex: '',
    defaultSelectValue: '',
    queryParam: {}
  },
  emits: ['defaultSelect'],
  props: {
    selectValue: String,
    dataList: Array,
    valueField: String,
    labelField: String,
    url: String,
    defaultSelectIndex: String,
    defaultSelectValue: String,
    queryParam: Object
  },
  watch: {
    queryParam: function (nv, ov) {
      this.getDataList(nv)
    }
  },
  data() {
    return {
      valueField: (this.valueField === undefined || this.valueField === 'null' || this.valueField === '') ? 'code' : this.valueField,
      labelField: (this.labelField === undefined || this.labelField === 'null' || this.labelField === '') ? 'name' : this.labelField,
      bValue: this.selectValue,
      dataList: [],
      url: this.url
    }
  },
  created() {
    this.getDataList({}, 'created')
  },
  methods: {
    queryBaseCombox(query) {
      this.getDataList(query)
    },
    queryBaseComboxNoQuery() {
      if (this.$attrs.modelValue == undefined || this.$attrs.modelValue == null || this.$attrs.modelValue == "") {
        this.getDataList({})
      }
    },
    /** 查询下拉列表 */
    getDataList(query, type) {
      var param = {}
      param.condition = query
      request({
        url: this.url,
        method: 'get',
        params: Object.assign(param, this.queryParam)
      }).then(response => {
        if (response.result != undefined) {
          this.dataList = response.result
        } else if (response.rows != undefined) {
          this.dataList = response.rows
        } else if (response.msg != undefined) {
          this.dataList = response.msg
        } else if (response.list != undefined) {
          this.dataList = response.list
        } else if (response.length >= 0) {
          this.dataList = response
        }
        if (type == 'created') {
          if (this.defaultSelectValue != undefined && this.defaultSelectValue != null && this.defaultSelectValue != '') {
            this.$emit('defaultSelect', this.defaultSelectValue);
          } else if (this.defaultSelectIndex != undefined && this.defaultSelectIndex != null && this.defaultSelectIndex != '') {
            this.$emit('defaultSelect', this.dataList[Number(this.defaultSelectIndex)][this.valueField])
          }
        }
      })
    },
  },
}
</script>
